<div class="col-sm-12 mt20">
    <div class="modal-header" style="background-color: #fff;">
        <h4 class="modal-title">预览</h4>
    </div>
    <div class="modal-body" style="background-color: #fff;">
        <div class="contains panel panel-default">
            <div class="demo panel-body">
                <div class="col-xs-12 row">
                    <div id="seat-map2" class="col-xs-12 text-center" style="max-height: 800px;">
                        <div class="front-2">屏幕</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer" style="background-color: #fff;">
        <button class="btn btn-success" onclick="javascript:
                $('.seatCharts-cell-2-new').addClass('seatCharts-cell-2');
                $('.seatCharts-cell-2').removeClass('seatCharts-cell-2-new');">默认</button>
        <button class="btn btn-danger" onclick="javascript:
                $('.seatCharts-cell-2').addClass('seatCharts-cell-2-new');
                $('.seatCharts-cell-2-new').removeClass('seatCharts-cell-2');
            ">缩小</button>
    </div>
    <style type="text/css">
        .front {
            width: 400px;
            /* margin: 5px 32px 45px 32px; */
            /* margin-left: 180px;
            margin-bottom: 30px; */
            background-color: #f0f0f0;
            color: #666;
            /* text-align: center; */
            /* padding: 3px; */
            border-radius: 5px;
            margin: auto;
        }

        div.seatCharts-container-2 {
            /* border-right: 1px dotted #adadad; */
            /* width: 81%; */
            /* padding: 5%; */
            float: left;
            /* max-height: 100%; */
            /* max-width: 750px; */
            overflow: auto;
        }

        div.seatCharts-cell-2 {
            color: #182C4E;
            height: 35px;
            width: 35px;
            /* line-height: 25px; */
            margin: 3px;
            /* float: left; */
            text-align: center;
            outline: none;
            font-size: 13px;
            display: inline-block;
        }

        div.seatCharts-cell-2.seatCharts-space-2 {
            display: none;
        }

        div.seatCharts-seat-2 {
            /* color: #fff; */
            cursor: pointer;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        div.seatCharts-seat-2.unavailable {
            background-color: #fff;
            color: #fff;
            /* border: 1px black solid; */
            /* border-radius: 0.05px; */
            /* cursor: not-allowed; */
        }

        div.seatCharts-seat-2.available {
            background-color: #ececec;
            border: none;
        }

        div.seatCharts-seat-2.selected {
            background-color: #ececec;
            border: none;
        }

        div.seatCharts-row-2 {
            white-space: nowrap;
            /* height: 60px; */
        }

        div.seatCharts-cell-2-new {
            color: #182C4E;
            height: 20px;
            width: 20px;
            /* line-height: 25px; */
            margin: 1px;
            /* float: left; */
            text-align: center;
            outline: none;
            font-size: 0px;
            display: inline-block;
        }
    </style>
</div>